<template>
  <div class="pay-method">
    <h3>支付方式</h3>
    <div class="pay-method-all">
      <div class="pay-method-show">
        <div
            :class="{active:index===listIndex}"
             v-for="(list, index) of payLsit"
             @click="btn(list.name, index)"
             class="pay-one"
             :key="index">
          {{list.name}}
        </div>
      </div>
      <div class="pay-content">
        <!-- <div v-show="listIndex==0" class="pay-one-1">
          支持支付宝支付、微信支付、银行卡支付、财付通等
        </div>
        <div v-show="listIndex==1" class="pay-one-1">
          花呗分期是花呗联合天猫淘宝推出的，面向互联网的赊购服务，通过支付宝轻松还款，0首付
        </div>
        <div v-show="listIndex==2" class="pay-one-1">
          货到再付款，支持现金交易
        </div> -->
        <div
          class="pay-one-1"
          v-for="(list, index) of payContents"
          :key='index'
          v-show="listIndex==index"
          >
          {{ list.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listIndex: 0,
      payLsit: [{
        id: 1,
        name: '在线支付'
      }, {
        id: 2,
        name: '花呗分期'
      }, {
        id: 3,
        name: '货到付款'
      }],
      payContents: [{
        id: 1,
        content: '支持支付宝支付、微信支付、银行卡支付、财付通等'
      }, {
        id: 2,
        content: '花呗分期是花呗联合天猫淘宝推出的，面向互联网的赊购服务，通过支付宝轻松还款，0首付'
      },{
        id: 3,
        content: '货到再付款，支持现金交易'
      },]
    }
  },
  methods: {
    btn(id, index){
      this.listIndex = index
    }
  },
}
</script>

<style lang="less">
  .pay-method{
    width: 100%;
    background: white;
    h3{
      border-top: .2rem solid #F4F4F4;
      line-height: 1.2rem;
      border-bottom: 1px solid #eee;
      padding-left: .42rem;
      font-size: .42rem;
    }
    .pay-method-all{
      width: 100%;
      .pay-method-show{
        width: 93%;
        margin: .2rem auto;
        height: .8rem;
        .pay-one{
          width: 31%;
          float: left;
          height: .8rem;
          border: 1px solid #ccc;
          line-height: .8rem;
          text-align: center;
          border-radius: .2rem;
          margin: .1rem;
          font-size: .3rem;
        }
        .pay-one.active{
          color: #55B8F0;
        }
      }
    }
    .pay-content{
      width: 91%;
      margin: .2rem auto;
      padding-top: .2rem;
      padding-bottom: .3rem;
      .pay-one-1{
        border: 1px solid #ccc;
        border-radius: .2rem;
        padding: .3rem;
        font-size: .23rem;
        line-height: .42rem;
      }
    }
  }
</style>
